<template>
    <el-tabs v-model="activeTag">
        <el-tab-pane label="修改角色" name="roleUpdateTAG">
            <el-form ref="roleUpdateRef" :model="roleUpdate" :rules="rules" label-width="100px" size="small">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="roleUpdate.roleName"></el-input>
                </el-form-item>
                <el-form-item label="权限字符" prop="perms">
                    <el-input v-model="roleUpdate.perms"></el-input>
                </el-form-item>
                <el-form-item label="角色排序" prop="sort">
                    <el-input-number v-model="roleUpdate.sort" controls-position="right" :min="1" :max="99"
                        style="width: 100%;" />
                </el-form-item>
                <el-form-item label="角色状态" prop="isEnable">
                    <el-radio-group v-model="roleUpdate.isEnable">
                        <el-radio :label="true">启用</el-radio>
                        <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="角色权限" prop="menuIds">
                    <div>
                        <el-checkbox v-model="expanded" @change="handlerExpanded">展开/折叠</el-checkbox>
                        <el-checkbox v-model="isSelectAll" @change="handlerIsSelectAll">全选/全不选</el-checkbox>
                    </div>
                    <el-tree :data="menuTree" :props="defaultProps" show-checkbox node-key="menuId" ref="treeRef">
                    </el-tree>
                </el-form-item>

                <el-form-item label="角色备注" prop="remark">
                    <el-input v-model="roleUpdate.remark"></el-input>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    props: {
        roleUpdate: {
            type: Object,
            required: true,
        },
        rules: {
            type: Object,
            required: true,
        },
        menuTree: {
            Type: Array,
            required: true
        }
    },
    data() {
        return {
            activeTag: "roleUpdateTAG",
            expanded: false,
            isSelectAll: false,
            defaultProps: {
                children: 'child',
                label: 'name'
            },
        }
    },
    methods: {
        //获取菜单树的节点
        getMenutreeNode(menuTree, array = []) {
            if (menuTree) {
                menuTree.map(menu => {
                    array.push(menu.menuId);
                    if (menu.child && menu.child.length > 0) {
                        this.getMenutreeNode(menu.child, array);
                    }
                })
            }
            return array;
        },
        //设置菜单节点是否展开或折叠
        handlerExpanded(event) {
            this.getMenutreeNode(this.menuTree).forEach(element => {
                this.$refs.treeRef.getNode(element).expanded = event
            })
        },
        //设置菜单节点全选或者全不选
        handlerIsSelectAll(event) {
            this.getMenutreeNode(this.menuTree).forEach(element => {
                this.$refs.treeRef.getNode(element).checked = event;
            })
        },
        //重置表单
        reset() {
            this.$refs.roleUpdateRef.resetFields();
        },
        //校验表单
        validate() {
            let checkResult = true;
            //设置角色菜单选择的菜单权限
            this.roleUpdate.menuIds = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()
            ];
            this.$refs.roleUpdateRef.validate((valid) => {
                checkResult = valid;
            })
            return checkResult;
        },
        //初始化默认选中的菜单节点
        defaultCheckMenuNode() {
            this.roleUpdate.menuIds.forEach(node => {
                this.$refs.treeRef.getNode(node).checked = true;
            })
        },
    },
    mounted() {
        this.defaultCheckMenuNode();
    }
}
</script>

<style scoped lang="scss"></style>
